<template>
  <div class="quality qualityForMenu">
    <el-tabs v-model="activeName" :active-name="activeName" @tab-click="tabChange">
      <el-tab-pane :label="$t('qualityCheck.normal')"  name="normal">
      </el-tab-pane>
      <el-tab-pane :label="$t('qualityCheck.random')" name="random">
      </el-tab-pane>
      <el-tab-pane :label="$t('qualityCheck.task')"  name="task">
      </el-tab-pane>
      <el-tab-pane :label="$t('qualityCheck.submitted')"  name="submitted">
      </el-tab-pane>
    </el-tabs>
    <keep-alive>
      <component :is="activeName"></component>
    </keep-alive>
  </div>
</template>
<script>
  import normal from './Check/Normal'
  import random from './Check/Random'
  import task from './Check/Task.vue'
  import submitted from './Check/submitted.vue'
  export default {
    name: 'qualityCheck',
    data () {
      return {
        activeName: this.$route.params.tabType || 'normal',
        loading: false,
        tabPanes: [
        ],
        refresh: 'normal'
      }
    },
    components: {
      normal,
      random,
      task,
      submitted
    },
    methods: {
      tabChange (tab) {
        this.refresh = tab.name
        this.activeName = tab.name
        this.$router.push({ path: '/index/qualityCheck/quality_check/' + tab.name })
      }
    },
    beforeMount () {
      this.$store.dispatch('getCache', {type: 'callLabel'})
//      this.$router.push({ path: '/index/qualityCheck/quality_check/' + this.activeName })
    }
  }
</script>
<style lang="stylus" scoped>
  .quality
    height calc(100vh - 53px)
  .qualityForMenu
    .el-tabs__nav-wrap::after
      height 0
</style>
